<script setup lang="ts">
import "@/assets/bpmn_plant.css";
import 'bpmn-js-color-picker/colors/color-picker.css';
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/diagram-js.css";

import fileUtils from 'gtl-utils/utils/file-utils'
import { Download, FolderOpened, Upload } from "@element-plus/icons-vue/global";
import BpmnColorPickerModule from 'bpmn-js-color-picker';
import resizeAllModule from 'bpmn-js-nyan/lib/resize-all-rules';
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
ZeebePropertiesProviderModule,
} from "bpmn-js-properties-panel";
import Modeler from "bpmn-js/lib/Modeler";
import { onMounted } from "vue";
import ZeebeBpmnModdle from 'zeebe-bpmn-moddle/resources/zeebe.json';
import customTranslate from '../adapter/zh';

var bpmnModeler:Modeler|null = null;
onMounted(() => {
  bpmnModeler = new Modeler({
    container: "#canvas",
    propertiesPanel: {
      parent: "#properties",
    },
    additionalModules: [
      { translate: ['value', customTranslate] },
      BpmnColorPickerModule,
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,
      ZeebePropertiesProviderModule,
      resizeAllModule,
    ],
    moddleExtensions: {
      zeebe: ZeebeBpmnModdle,
    }
  });
  bpmnModeler.createDiagram();
});
function saveXml(){
  bpmnModeler?.saveXML({ format: true }).then((data) => {
        console.debug(data.xml)
        var name = bpmnModeler?.getDefinitions()?.rootElements[0]?.name
        fileUtils.dowload(name+"bpmn.bpmn", data.xml)
    })
}

// 保存为svg
function saveSvg() {
    bpmnModeler?.saveSVG().then((data) => {
        console.debug(data.svg)
        var name = bpmnModeler?.getDefinitions()?.rootElements[0]?.name
        fileUtils.dowload(name+"bpmn.svg", data.svg)
    })
}

/**打开bpmn文件*/
const openfile = ()=>{
  let input = document.createElement("input")
  input.setAttribute("type", "file");
  input.click()
  const  get_files = (event: Event)=>{
    var files: FileList = (<any>event.target).files;
      fileUtils.read(files.item(0)!, (data: any)=>{
        bpmnModeler?.importXML(data)
      })
    input.removeEventListener("change", get_files)
  }
  input.addEventListener("change", get_files)
}

</script>

<template>
  <div class="modeler" style="height: var(--ingres-top-bar)">
    <div id="canvas"style="height: 100%"></div>
    <div id="properties" style="overflow-x: auto; width: 320px;"></div>
  </div>
  <div id="bpmn-left-bar">
    <el-button title="打开bpmn文件" @click="openfile" ><el-icon><FolderOpened /></el-icon></el-button>
    <el-button title="上传到服务器"><el-icon><Upload /></el-icon></el-button>
    <el-button @click="saveXml" title="下载BPMN格式"><el-icon><Download /></el-icon><span style="font-size: 9px;margin-bottom: 9px">BPMN</span> </el-button>
    <el-button @click="saveSvg" title="下载SVG格式"><el-icon><Download /></el-icon><span style="font-size: 9px;margin-bottom: 9px">SVG</span> </el-button>
  </div>
</template>

<style scoped>
#properties{
  position: absolute;
  right: 0px;
  top:65px;
  height: calc( var(--ingres-top-bar-and-margin) - 42px );
  overflow: hidden;
}
#bpmn-left-bar {
  position: absolute;
  z-index: 500;
  right: 0px;
  bottom: 0px;
  
  background-color: rgb(255, 255, 255);
  padding: 8px 8px;
}
.el-button {
  margin-left: 3px;
}
</style>
